<template>
  <div>
    <div class="card-header">
      <span>{{title}}</span>
      <svg t="1640324500715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2024" width="16" height="16">
        <path
          d="M548.352 65.984A435.2 435.2 0 0 1 816.64 195.2a451.84 451.84 0 0 1 29.44 600.96 438.4 438.4 0 0 1-549.12 111.36 448 448 0 0 1-199.68-224 455.68 455.68 0 0 1-14.72-301.44 448 448 0 0 1 177.28-242.56 435.2 435.2 0 0 1 288.512-73.536zM578.56 888.32a376.96 376.96 0 0 0 218.24-132.48 388.48 388.48 0 0 0-25.6-515.84 372.48 372.48 0 0 0-475.52-47.36 387.84 387.84 0 0 0 32 658.56 371.84 371.84 0 0 0 250.88 37.12zM544.64 448h-64v256h64V448z m0-128h-64v64h64V320z"
          p-id="2025" fill="#bfbfbf"></path>
      </svg>
    </div>
    <div class="card-content">12306</div>
    <div class="card-charts">
      <slot name="charts"></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props:['title']
}
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  color: #a7a3a5;
}

.card-content {
  font-size: 30px;
  padding: 10px 0;
}

.card-charts {
  height: 50px;
}
.card-footer{
  border-top: 1px solid #eee;
  padding: 5px 0;
}
</style>
